<!--
  Generated template for the IndentPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <customer-header [showCate]="true"></customer-header>
</ion-header>


<ion-content padding-top color="grid">
  <div margin-bottom *ngFor="let d of orders" class="order" color="row">

    <ion-grid no-padding *ngIf="!d.delete">

      <ion-row padding-horizontal color="row">
        <ion-col col-4><label>Order ID:</label></ion-col>
        <ion-col col-8 text-right>{{d.OrderNumber.Order_ID |orderIdFormat}}</ion-col>
        <ion-col col-4 offset-1><label>Bill:</label></ion-col>
        <ion-col col-7 text-right class="red">{{d.OrderNumber.Order_Total |currency:'USD' :true}}</ion-col>
      </ion-row>
      <ion-row class="header" padding-horizontal>
        <ion-col col-4><label>Status:</label></ion-col>
        <ion-col col-8 text-right>{{d.OrderNumber.Order_State |getState}}</ion-col>
        <ion-col col-5 offset-1><label>Subtotal:</label></ion-col>
        <ion-col col-6 text-right> {{d.OrderNumber.Sub_Total |currency:'USD' :true}}</ion-col>
        <ion-col col-4><label>Store_ID:</label></ion-col>
        <ion-col col-8 text-right>{{d.OrderNumber.Store_ID}}</ion-col>
        <ion-col col-4 offset-1><label>Tax:</label></ion-col>
        <ion-col col-7 text-right> {{d.OrderNumber.Tax}}</ion-col>
        <ion-col col-5><label>Table_ID:</label></ion-col>
        <ion-col col-7 text-right>{{d.OrderNumber.Table_ID}}</ion-col>
        <ion-col col-3 offset-1><label>Tips:</label></ion-col>
        <ion-col col-8 text-right>10-20% of Bill</ion-col>
      </ion-row>
      <!--{{d.OrderNumber.Tips|currency:'USD' :true}}-->
      <ion-row *ngFor="let c of d.Orders" padding-horizontal color="row">
        <ion-col col-3>
          {{c.Dish_Abbreviation}}
        </ion-col>
        <ion-col col-8 class="name">
          {{c.Dish_Name}}
        </ion-col>
        <ion-col col-3 text-left offset-2>
          {{c.Price}}
        </ion-col>
        <ion-col col-3 text-right>
          {{c.Number_of_Orders}}
        </ion-col>
        <ion-col col-5 class="state" text-right>
          {{c.Total}}
        </ion-col>
      </ion-row>

    </ion-grid>
    <!--<div class="footer" padding *ngIf="!d.delete">
      <div float-right *ngIf="d.OrderNumber.Order_State==1">
        <button ion-button (click)="cancel(d)" block outline>cancel</button>
      </div>
      <div float-right *ngIf="d.OrderNumber.Order_State==0">
        <button ion-button (click)="delete(d)" block outline>delete</button>
      </div>
    </div>-->
  </div>
  <ion-infinite-scroll (ionInfinite)="getMore($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles"
                                 loadingText="Loading more orders..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

